<template>
  <div class="d-flex justify-content-center align-items-center vh-100">
    <div class="card p-4 shadow-sm" style="width: 400px;">
      <h2 class="text-center mb-4">医疗系统注册</h2>
      <form @submit.prevent="handleSubmit">
        <div class="mb-3">
          <label for="username" class="form-label">用户名</label>
          <input type="text" class="form-control" id="username" v-model="username" placeholder="请输入用户名" required>
        </div>
        <div class="mb-3">
          <label for="password" class="form-label">密码</label>
          <input type="password" class="form-control" id="password" v-model="password" placeholder="请输入密码" required>
        </div>
        <div class="mb-3">
          <label for="user_type" class="form-label">用户类型</label>
          <select class="form-select" v-model="userType" required>
            <option value="" disabled selected>选择用户类型</option>
            <option value="hospital">医院机构</option>
            <option value="doctor">医生</option>
            <option value="patient">病人</option>
            <option value="medicalConsortium">医联体联盟</option>
          </select>
        </div>
        <div class="d-grid">
          <button type="submit" class="btn btn-primary">登录</button>
        </div>
        <div v-if="errorMessage" class="alert alert-danger mt-3">
          {{errorMessage}}
        </div>
        <div v-if="successMessage" class="alert alert-success mt-3">
          {{successMessage}}
        </div>
      </form>
      <br />
      <a style="text-align: right;color: #0d6efd;text-decoration: none" href="/login">用户登录</a>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "Register",
  data() {
    return {
      username: '',
      password: '',
      userType: '',
      errorMessage:'',
      successMessage:''
    };
  },
  methods: {
    async handleSubmit() {
      if(this.username && this.password && this.userType){
        this.errorMessage = "";
        this.successMessage = "注册成功！";
        setTimeout(()=>{
          this.$router.push({path:"/login"});
        },1000)
      } else {
        this.errorMessage = "请输入用户名和密码！";
      }
    }
  }
};
</script>
<style scoped>
@import "/src/assets/bootstrap.min.css";

/* 页面整体样式：确保内容在垂直和水平居中 */
.d-flex {
  background-color: #f8f9fa; /* 浅灰色背景 */
}

/* 卡片样式：用于登录表单的容器 */
.card {
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* 添加轻微阴影 */
  border-radius: 10px; /* 圆角 */
  border: none; /* 移除边框 */
  background-color: white; /* 白色背景 */
}

/* 标题样式：优化文字排版 */
h2 {
  font-weight: bold; /* 加粗标题 */
  font-size: 1.5rem; /* 字体大小 */
  color: #343a40; /* 深灰色文本 */
}

/* 输入框样式：确保表单元素之间的间距和外观一致 */
.form-control, .form-select {
  border-radius: 5px; /* 轻微圆角 */
  border: 1px solid #ced4da; /* 边框颜色 */
  padding: 0.75rem 1rem; /* 内边距 */
  font-size: 1rem; /* 字体大小 */
}

/* 按钮样式：主要按钮样式 */
.btn-primary {
  background-color: #007bff; /* Bootstrap默认蓝色 */
  border: none; /* 移除边框 */
  padding: 0.75rem; /* 内边距 */
  border-radius: 5px; /* 轻微圆角 */
  font-size: 1.1rem; /* 调整按钮文字大小 */
  font-weight: bold; /* 加粗文字 */
  transition: background-color 0.3s ease; /* 鼠标悬停时的动画效果 */
}

.btn-primary:hover {
  background-color: #0056b3; /* 鼠标悬停时的颜色变化 */
}

/* 小屏幕优化：确保在较小设备上也有良好的用户体验 */
@media (max-width: 576px) {
  .card {
    width: 100%; /* 小屏幕下卡片宽度自适应 */
    padding: 2rem; /* 调整内边距 */
  }
  h2 {
    font-size: 1.25rem; /* 小屏幕下标题文字略小 */
  }
  .btn-primary {
    font-size: 1rem; /* 按钮文字略小 */
  }
}
</style>
